<template>
  <el-container>
    <my-theme-card>
      <el-header>
        <my-title :title="'节点设置'" />
      </el-header>
      <el-main>
        <el-tabs v-model="currentTabPane" type="border-card">
          <el-tab-pane label="下级节点设置" name="1">
            <el-button class="table-header-btn" type="primary" icon="el-icon-plus" size="mini" @click="chooseNodeClick">新增</el-button>
            <template v-for="(item,index) in node.behind_nodes">
              <el-card :key="index" class="box-card" style="margin-top:5px;">
                <div style="width:100%;height:25px;line-height:25px;">
                  <div style="display:inline-block;width:150px;text-align: center;">{{ node.before_node.nodename }}</div>
                  <div style="display:inline-block;width:100px;border:solid 2px #61cc3c;margin-bottom:6px;" />
                  <div style="display:inline-block;width:0;height:0;border: 8px solid;border-color: rgba(255,0,0,0) rgba(255,0,0,0) rgba(255,0,0,0) #61cc3c;margin-left:-5px;" />
                  <div style="display:inline-block;width:150px;text-align: left;">{{ item.nodename }}</div>
                </div>
                <el-divider />
                <el-link type="primary" @click="judgeTaskClick(item)">+添加</el-link>
                <template>
                  <el-table :data="judgeTasks[item.nodesn]" border style="width: 100%" class="table" :header-cell-style="$store.state.settings.themeTableHeaderStyle">
                    <el-table-column prop="name" label="名称" width="180" />
                    <el-table-column prop="class_ref" label="路径" />
                    <el-table-column fixed="right" label="操作" width="180">
                      <template slot-scope="scope">
                        <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-card>
            </template>
          </el-tab-pane>

          <el-tab-pane label="节点表单设置" name="2">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>关联的表单列表</span>
              </div>
              <div class="grid-content bg-purple">
                <el-button class="table-header-btn" type="primary" icon="el-icon-plus" size="mini" @click="chooseFormClick">新增</el-button>
                <template>
                  <el-table :data="forms" stripe border style="width: 100%">
                    <el-table-column prop="linkname" label="表单名称" width="180" />
                    <el-table-column prop="linkpath" label="表单路径" />
                    <el-table-column label="操作" width="180">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="removeForm(scope.row)">取消</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </div>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="节点操作设置" name="3">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>按钮列表</span>
              </div>
              <div class="grid-content bg-purple">
                <el-button class="table-header-btn" type="primary" icon="el-icon-plus" size="mini" @click="chooseButtonClick">新增</el-button>
                <template>
                  <el-table :data="buttons" stripe border style="width: 100%">
                    <el-table-column prop="name" label="按钮名称" width="180" />
                    <el-table-column prop="label" label="按钮标签" />
                    <el-table-column label="操作" width="180">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="removeButton(scope.row)">取消</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </div>
            </el-card>

            <el-card class="box-card" shadow="hover" style="margin-top:25px;">
              <div slot="header" class="clearfix">
                <span>操作执行任务列表</span>
              </div>
              <div class="grid-content bg-purple">
                <el-button class="table-header-btn" type="primary" icon="el-icon-plus" size="mini" @click="chooseHandleTaskClick">新增</el-button>
                <template>
                  <el-table :data="handleTasks" stripe border style="width: 100%">
                    <el-table-column prop="class_ref" label="Class路径" width="180" />
                    <el-table-column prop="name" label="名称" />
                    <el-table-column label="操作" width="180">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="removeHandleTask(scope.row)">取消</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </div>
            </el-card>
          </el-tab-pane>

          <el-row style="text-align: center;margin-top:20px;">
            <el-button type="primary" @click="nodeInfoSet">确 定</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-row>

        </el-tabs>

      </el-main>
      <el-dialog title="节点选择" :visible.sync="dialogNodesVisible" :close-on-click-modal="false" width="75%" center append-to-body>
        <node-list :procno="row.procno" @confirm="closeNodesDialog" />
      </el-dialog>

      <el-dialog title="表单选择" :visible.sync="dialogFormsVisible" :close-on-click-modal="false" width="75%" center append-to-body>
        <form-list :procno="row.procno" @confirm="closeFormsDialog" />
      </el-dialog>

      <el-dialog title="按钮选择" :visible.sync="dialogButtonVisible" :close-on-click-modal="false" width="75%" center append-to-body>
        <button-list :procno="row.procno" @confirm="closeButtonDialog" />
      </el-dialog>

      <el-dialog title="绑定任务添加" :visible.sync="dialogHandleTaskVisible" :close-on-click-modal="false" width="75%" center append-to-body>
        <el-form ref="form" :model="tempHandleTask" label-width="180px" :inline="true">
          <el-form-item label="类路径">
            <el-input v-model="tempHandleTask.class_ref" placeholder="com.test.Test" />
          </el-form-item>
          <el-form-item label="是否启用">
            <el-select v-model="tempHandleTask.use_flag" placeholder="请选择">
              <el-option
                v-for="item in dir_logic"
                :key="item.id"
                :label="item.label"
                :value="item.data"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="tempHandleTask.name" />
          </el-form-item>
          <el-form-item label="流程编号">
            <el-input v-model="tempHandleTask.procno" readonly />
          </el-form-item>
          <el-form-item label="节点号">
            <el-input v-model="tempHandleTask.nodesn" readonly />
          </el-form-item>
          <el-form-item label="按钮操作类型">
            <el-select v-model="tempHandleTask.tsk_btn_type" placeholder="请选择">
              <el-option
                v-for="item in dir_tsk_btn_type"
                :key="item.id"
                :label="item.label"
                :value="item.data"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="closeHandleTaskDialog">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="绑定节点判断" :visible.sync="dialogNodeTaskVisible" :close-on-click-modal="false" center append-to-body>
        <el-form ref="form" :model="tempNodeJudgeTask" label-width="180px" :inline="true">
          <el-form-item label="类路径">
            <el-input v-model="tempNodeJudgeTask.class_ref" placeholder="com.test.Test" />
          </el-form-item>
          <el-form-item label="是否启用">
            <el-select v-model="tempNodeJudgeTask.use_flag" placeholder="请选择">
              <el-option
                v-for="item in dir_logic"
                :key="item.id"
                :label="item.label"
                :value="item.data"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="tempNodeJudgeTask.name" />
          </el-form-item>
          <el-form-item label="流程编号">
            <el-input v-model="tempNodeJudgeTask.procno" readonly />
          </el-form-item>
          <el-form-item label="当前节点">
            <el-input v-model="tempNodeJudgeTask.before_nodename" readonly />
            <el-input v-model="tempNodeJudgeTask.before_nodesn" type="hidden" readonly />
          </el-form-item>
          <el-form-item label="指向节点">
            <el-input v-model="tempNodeJudgeTask.behind_nodename" readonly />
            <el-input v-model="tempNodeJudgeTask.behind_nodesn" type="hidden" readonly />
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input v-model="tempNodeJudgeTask.remark" type="textarea" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogNodeTaskVisible = false">取 消</el-button>
          <el-button type="primary" @click="addNodeJudgeTask">确 定</el-button>
        </div>
      </el-dialog>

      <my-delete-dialog
        :show-dialog="dialogConfirmVisible"
        :row="currentJudgeTask"
        @deleteTask="deleteTask"
        @cancelTask="dialogConfirmVisible = false"
      />
    </my-theme-card>

  </el-container>
</template>
<script>
import request from '@/utils/request'
import formList from '@/components/FormList/index'
import buttonList from '@/components/ButtonList/index'
import nodeList from '@/components/NodeList/index'
import MyThemeCard from '../../../../components/MyThemeCard/index'
export default {
  components: {
    MyThemeCard,
    nodeList,
    formList,
    buttonList
  },
  props: {
    row: Object
  },
  data: function() {
    return {
      editor: {},
      dialog1: 'dialog1',
      node: {
        before_node: {},
        behind_nodes: {}
      },
      tempHandleTask: {},
      tempNodeJudgeTask: {},
      forms: [],
      buttons: [],
      handleTasks: [],
      judgeTasks: {},
      currentJudgeTask: {},
      currentTabPane: '1',
      dialogNodesVisible: false,
      dialogFormsVisible: false,
      dialogButtonVisible: false,
      dialogHandleTaskVisible: false,
      dialogNodeTaskVisible: false,
      dialogConfirmVisible: false
    }
  },
  computed: {
    dir_logic: function() {
      return this.$store.state.directory.directory['logic']
    },
    dir_tsk_btn_type: function() {
      return this.$store.state.directory.directory['tsk_btn_type']
    }
  },
  created() {
    this.node.before_node = this.row
    this.tempHandleTask.procno = this.row.procno
    this.tempHandleTask.nodesn = this.row.nodesn
    this.queryNextNode()
    this.queryFormsByNode()
    this.queryNodeButtonsAndHandleTasks()
    this.directoryUpdate()
    this.queryNodeJudgeByNode()
  },
  methods: {
    // 选择节点时点击事件
    chooseNodeClick: function() {
      this.dialogNodesVisible = true
    },
    // 关闭选择节点弹框
    closeNodesDialog: function(ids, objs) {
      this.node.behind_nodes = objs
      this.dialogNodesVisible = false
    },
    // 移除选择的按钮
    removeButton: function(row) {
      this.buttons = this.buttons.filter(item => {
        return item.id !== row.id
      })
    },
    // 移除选择的任务
    removeHandleTask: function(row) {
      this.handleTasks = this.handleTasks.filter(item => {
        return item.id !== row.id || item.name !== row.name
      })
    },
    // 移除选择的表单
    removeForm: function(row) {
      this.forms = this.forms.filter(item => {
        return item.id !== row.id
      })
    },
    // 选择绑定任务时点击事件
    chooseHandleTaskClick: function() {
      this.dialogHandleTaskVisible = true
    },
    closeHandleTaskDialog: function() {
      if (this.tempHandleTask) {
        this.handleTasks.push(this.tempHandleTask)
        this.tempHandleTask = {}
        this.tempHandleTask.procno = this.row.procno
        this.tempHandleTask.nodesn = this.row.nodesn
      }
      this.dialogHandleTaskVisible = false
    },
    // 选择按钮时点击事件
    chooseButtonClick: function() {
      this.dialogButtonVisible = true
    },
    closeButtonDialog: function(ids, objs) {
      if (objs) {
        this.buttons = objs
      }
      this.dialogButtonVisible = false
    },
    // 选择表单时点击事件
    chooseFormClick: function() {
      this.dialogFormsVisible = true
    },
    // 关闭选择表单弹框
    closeFormsDialog: function(ids, objs) {
      if (objs) {
        this.forms = objs
      }
      this.dialogFormsVisible = false
    },
    // 更新节点指向
    nodeInfoSet: function() {
      this.$progress.start()
      request({
        url: '/task/node/nodeInfoSet',
        method: 'post',
        data: {
          node: this.node.before_node,
          behind_nodes: this.node.behind_nodes,
          form: this.forms,
          buttons: this.buttons,
          handleTasks: this.handleTasks
        }
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
        this.$progress.done()
      })
    },
    // 查询该节点指向节点
    queryNextNode: function() {
      request({
        url: '/task/node/queryNextNode',
        method: 'post',
        data: this.node.before_node
      }).then(res => {
        if (res.result) {
          this.node.behind_nodes = res.data || {}
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
      })
    },
    // 查询该节点表单列表
    queryFormsByNode: function() {
      request({
        url: '/task/form/queryFormsByNode',
        method: 'post',
        data: this.node.before_node
      }).then(res => {
        if (res.result) {
          this.forms = res.data || []
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
      })
    },
    // 查询该节点表单列表
    queryNodeButtonsAndHandleTasks: function() {
      request({
        url: '/task/node/queryNodeButtonsAndHandleTasks',
        method: 'post',
        data: this.node.before_node
      }).then(res => {
        if (res.result) {
          this.buttons = res.data && res.data.buttons || []
          this.handleTasks = res.data && res.data.handletasks || []
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
      })
    },
    // 字典更新
    directoryUpdate: function() {
      this.$store.commit('directory/setDirectory', 'logic')
      this.$store.commit('directory/setDirectory', 'tsk_btn_type')
    },
    // 取消
    cancel: function() {
      this.$emit('toChangePage', 'list')
    },
    judgeTaskClick: function(row) {
      this.tempNodeJudgeTask.procno = row.procno
      this.tempNodeJudgeTask.before_nodename = this.node.before_node.nodename
      this.tempNodeJudgeTask.behind_nodename = row.nodename
      this.tempNodeJudgeTask.use_flag = 1
      this.tempNodeJudgeTask.before_nodesn = this.node.before_node.nodesn
      this.tempNodeJudgeTask.behind_nodesn = row.nodesn
      this.dialogNodeTaskVisible = true
    },
    addNodeJudgeTask: function() {
      request({
        url: '/task/nodeJudge/add',
        method: 'post',
        data: this.tempNodeJudgeTask
      }).then(res => {
        if (res.result) {
          this.$message.success('添加成功')
          this.queryNodeJudgeByNode()
          this.dialogNodeTaskVisible = false
          this.tempNodeJudgeTask = {}
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
      })
    },
    queryNodeJudgeByNode: function() {
      request({
        url: '/task/nodeJudge/queryNodeJudgeByNode',
        method: 'post',
        data: this.node.before_node
      }).then(res => {
        if (res.result) {
          this.judgeTasks = res.data
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
      })
    },
    // 删除事件
    deleteClick: function(row) {
      this.currentJudgeTask = row
      this.dialogConfirmVisible = true
    },
    deleteTask: function() {
      this.$progress.start()
      request({
        url: '/task/nodeJudge/delete',
        method: 'post',
        data: this.currentJudgeTask
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.dialogConfirmVisible = false
          this.queryNodeJudgeByNode()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    }
  }
}
</script>
